<template>
  <div class="login">
    <div class="login_box">
      <!--  -->
      <h2>登录</h2>
      <!-- 表单区域 ref:获取组件实例-->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" clearable></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="ruleForm.password"
            clearable
            show-password
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="submitForm()" type="primary"
            >登录</el-button
          >
          <!-- <el-button @click="login()" type="primary"
            >登录</el-button
          > -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import editeTheme from '../../utils/theme/index'
//引入助手函数
import {mapGetters,mapActions} from "vuex"
export default {
    computed:{
        ...mapGetters({
            ruleForm:"login/getForm",
            rules:"login/getRule"
        })
    },
  data() {
    return {
    };
  },
  mounted() {
    //获取缓存中的主题
    editeTheme(localStorage.getItem('themeName') || 'blue')
    
  },
  methods: {
    ...mapActions({
        login:"login/userLogin"
    }),
    submitForm(){
        this.login(this)
    }
  },
};
</script>

<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to right, #533646, #313d5f);
  position: relative;
}
.login_box {
  width: 300px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.login_box h2 {
  color: white;
  margin: 20px 0;
}
.el-button {
  width: 100%;
}
</style>
